@use "sass:math";
@use "sass:string";

#app {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}
  // height: 100%;
  // background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  // overflow: hidden;

@function getShadow($n) {
  $shadows: "#{math.random(100)}vw #{math.random(100)}vh #fff";
  @for $i from 1 through $n {
    $shadows: '#{$shadows},#{math.random(100)}vw #{math.random(100)}vh #fff';
  }
  @return string.unquote($shadows);
}
$duration:1000s;
$count:1000;
@for $i from 1 through 5 {
    $duration:math.floor(math.div($duration, 2));
    $count:math.floor(math.div($count, 2));
    .xk_layer#{$i} {
        position: fixed;
        $size: #{$i}px;
        top: 0;
        left: 0;
        width: $size;
        height: $size;
        border-radius: 50%;
        background: #f00;
        box-shadow: getShadow($count);
        animation: moveup $duration linear infinite;
        &:after{
            content: '';
            position: fixed;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            box-shadow: inherit;
            left: 0;
            top: 100vh;
          }
    }
}


@keyframes moveup {
    to{
        transform: translate(0, -100vh);
    }
}

// .VPFooter{
//     z-index: 0!important;
// }

.VPFooter{
  background-color: transparent;
  border: none;
}